/**
 * AI备忘录前端交互逻辑（详细注释版）
 * 核心功能：1. 任务表单提交（含AI加载状态、重复提交防护） 2. 任务状态实时更新（失败自动恢复）
 * 依赖：后端已实现 /task/add（添加任务）和 /task/status（更新状态）接口
 */

// ========================= 1. 任务表单提交逻辑 =========================
// 功能说明：拦截表单默认提交行为，异步调用后端添加任务接口，处理AI加载状态，防止重复提交

// 1.1 获取表单相关DOM元素（通过ID定位，确保与HTML中元素ID一致）
const taskForm = document.getElementById('taskForm'); // 任务表单容器（收集标题/详情/截止时间）
const submitBtn = document.getElementById('submitBtn'); // 提交按钮（控制禁用/启用，防止重复提交）
const loading = document.getElementById('loading'); // AI加载状态提示（默认隐藏）

// 1.2 给表单绑定"提交"事件（async关键字：允许内部使用await处理异步请求）
taskForm.addEventListener('submit', async (e) => {
    // 关键：阻止表单默认提交行为（默认会刷新页面，破坏用户体验）
    // 因为我们需要用fetch异步提交，提交后手动刷新或局部更新，而非页面整体刷新
    e.preventDefault();

    // 1.3 提交前准备：显示加载状态 + 禁用按钮（核心：防止用户重复点击提交）
    submitBtn.disabled = true; // 禁用按钮（点击后无法再次触发，避免多次调用API）
    loading.style.display = 'inline-block'; // 显示AI加载提示（告知用户正在处理，避免以为卡住）

    // 1.4 异步处理表单提交（try-catch-finally：捕获错误，确保无论成功/失败都恢复状态）
    try {
        // 1.4.1 收集表单数据（适配后端接收格式）
        // FormData：自动收集表单中所有带name属性的输入值（如name="title"、name="content"）
        const formData = new FormData(taskForm);
        // URLSearchParams：将FormData转为"application/x-www-form-urlencoded"格式
        // 原因：后端Gin框架通过c.PostForm()接收该格式参数，与后端接口适配
        const formParams = new URLSearchParams(formData);

        // 1.4.2 调用后端添加任务接口（fetch：浏览器原生异步请求API，await等待请求完成）
        const response = await fetch('/task/add', {
            method: 'POST', // 请求方法：POST（提交数据用POST，查询用GET）
            body: formParams, // 请求体：转换后的表单数据（自动设置Content-Type为application/x-www-form-urlencoded）
        });

        // 1.4.3 解析后端响应（后端返回JSON格式，如{msg: "任务添加成功"}）
        const result = await response.json(); // await：等待JSON解析完成

        // 1.4.4 提交成功：提示用户 + 刷新页面（显示新添加的任务）
        alert(result.msg); // 弹出后端返回的提示信息（如成功/失败原因）
        window.location.reload(); // 刷新页面（简单直接的方式，让新任务显示在列表中）
        // 优化方向：可改为"局部更新"（不刷新页面，直接在列表末尾添加新任务），需后端返回新任务完整数据

    } catch (error) {
        // 1.4.5 捕获异常（如网络中断、API调用失败、JSON解析错误等）
        // 给用户明确的错误提示，而非静默失败
        alert('添加任务失败：' + error.message);
        // 调试用：在浏览器控制台打印详细错误（开发阶段用，上线可删除）
        console.error('表单提交错误详情：', error);

    } finally {
        // 1.4.6 无论成功/失败，最终都恢复状态（核心：保证用户后续可操作）
        submitBtn.disabled = false; // 重新启用提交按钮
        loading.style.display = 'none'; // 隐藏AI加载提示
    }
});

// ========================= 2. 任务状态实时更新逻辑 =========================
// 功能说明：监听任务状态下拉框变化，异步调用后端更新接口，失败自动恢复原状态（避免用户看到错误状态）

// 2.1 获取所有状态选择器（querySelectorAll：选中HTML中所有class为"status-select"的下拉框）
// 每个任务项都有一个状态下拉框，所以需要遍历处理
const statusSelects = document.querySelectorAll('.status-select');

// 2.2 遍历每个状态选择器，绑定"变化"事件
statusSelects.forEach(select => {
    // 关键：记录初始状态（用于更新失败时恢复，避免用户看到错误的状态）
    // 比如用户把"待执行"改成"执行中"，但更新失败，需要自动改回"待执行"
    const oldStatus = select.value;

    // 2.3 给当前下拉框绑定"change"事件（值变化时触发）
    select.addEventListener('change', async (e) => {
        // 2.3.1 获取更新所需的关键数据（从HTML中提取，传递给后端）
        const taskId = e.target.dataset.id; // 获取任务ID（HTML中通过data-id="{{.ID}}"存储的任务唯一标识）
        const newStatus = e.target.value;   // 获取用户选择的新状态（如"doing"、"done"）

        // 2.3.2 异步调用后端更新接口（try-catch：处理更新失败）
        try {
            // 调用后端更新状态接口（参数：任务ID + 新状态）
            await fetch('/task/status', {
                method: 'POST',
                // 请求体：传递id和status，格式与后端c.PostForm()适配
                body: new URLSearchParams({
                    id: taskId,     // 任务唯一ID（后端通过ID定位要更新的任务）
                    status: newStatus // 新状态（后端更新数据库中该任务的status字段）
                })
            });

            // 2.3.3 更新成功（可选：可添加提示，此处默认不提示以减少干扰）
            // alert('状态已更新');

        } catch (error) {
            // 2.3.4 更新失败：恢复原状态 + 提示用户
            e.target.value = oldStatus; // 自动恢复为初始状态（核心：避免用户看到错误状态）
            alert('更新状态失败：' + error.message); // 提示失败原因
            // 调试用：打印错误详情
            console.error('状态更新错误详情：', error);
        }
    });
});